<template>
  <div class="step">
    <div v-if="!isVertical" class="step-bar-row flex items-center justify-center">
      <div v-for="(step, index) in steps" :key="index"
           class="step-item-row flex flex-1 flex-col items-center justify-center">
        <div class="w-100% flex flex-1 items-center">
          <div class="flex-1">
            <div v-if="index > 0" class="h-2rpx bg-hex-E1E1E1"
                 :class="[{ active: index === currentStep || index < currentStep }]" />
          </div>
          <div class="circle-row h-10rpx w-10rpx rounded-100% bg-hex-E1E1E1"
               :class="[{ active: index === currentStep || index < currentStep }]" />
          <div class="flex-1">
            <div v-if="index < steps.length - 1" class="h-2rpx bg-hex-E1E1E1"
                 :class="[{ active: index === currentStep - 1 || index < currentStep }]" />
          </div>
        </div>
        <div class="mt-12rpx text-24rpx text-hex-7C8699">{{ step.title }}</div>
        <div class="mt-12rpx text-24rpx text-hex-7C8699">{{ step.desc }}</div>
      </div>
    </div>
    <div v-else class="step-bar-column">
      <uni-steps :options="steps" active-color="#ABCD03" :active="currentStep" direction="column" />
    </div>
  </div>
</template>

<script setup lang="ts">

interface StepBarProps {
  steps: {
    title: string
    desc?: string
  }[]
  currentStep: number
  isVertical?: boolean
}
const props = defineProps<StepBarProps>()
</script>

<style lang='scss'>
.step{
  .active{
    background: #ABCD03
  }

  ::v-deep .uni-steps__column-text{
    border: none !important
  }
}
</style>

